<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/reset.css">
    <style>
        .list{
            padding: 20px;
            background-color: grey;
        }
        .list li{
            line-height: 45px;
            border: 1px solid #333;
            margin-top: 10px;
            background-color: #6ff;
        }
        .list p,
        .list span{
            display:block;
            line-height: 40px;
            border: 1px solid #333;
            margin-top: 10px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <button class="add">新增</button>
    <ul class="list">
        <p>p01</p>
        <li id="first">01</li>
        <li name="second">02</li>
        <li class="mid">03</li>
        <span>span01</span>
        <li>04</li>
        <li>05</li>
        <p>p02</p>
        <li  class="last six">06</li>
    </ul>
</body>
<script>
    var add = document.getElementsByClassName("add")[0];
    var list = document.getElementsByClassName("list")[0];
    var liList = list.getElementsByTagName("li");
    console.log(liList);

    // 什么是事件委托?
    // 利用事件冒泡的原理,将子(代)元素的事件委托给父(代)元素,由父(代)元素代为执行; 
    

    // 事件委托的实现步骤
    // 1. 给父元素绑定相同类型的事件
    // 2. 父元素通过事件对象获取事件源(触发事件元素  谁触发的事件)
    // 3. 通过事件源判断是否是委托事件的子(代)元素   是 => 执行对应的操作   不是 => 忽略
    //    a. 如果元素类型不同 => 可以通过标签名判断
    //    b. 如果元素类型相同 => 可以通过元素的属性(属性节点/元素节点的属性)判断  className id name 

    // 注意: 使用事件委托时,委托的只有事件 元素该获取的还要获取


    // 优点:
    // 1. 将子(代)元素的事件委托给父(代)元素,由父(代)元素代为执行  => 只有父(代)元素绑定了事件 => 节省内存
    // 2. 可以给未来生成的元素绑定事件   => 未来生成的元素触发事件也会冒泡给父(代)元素  => 父元素统一处理
    // 3. 提高了代码的执行效率 代码可读性强


    add.onclick = function(){
        var li = document.createElement("li");
        li.className = "newLi";
        li.textContent = "我是新增的li";

        // 元素生成之后在绑定
        li.onclick = function(){
            var index = Array.from(liList).indexOf(this);
            console.log(this,index);
        }
        list.appendChild(li);
    }


    list.onclick = function(e){  // this绑定事件的元素 => list  
        var e = e || window.event;
        var target = e.target || e.srcElement;  // target触发事件的元素
        // console.log("list被点击",target,target.tagName.toLowerCase()); 
        if(target.tagName.toLowerCase() == "ul"){
            console.log("点击了ul自己");
        }else if(target.tagName.toLowerCase() == "p"){
            console.log("点击了p");
        }else if(target.tagName.toLowerCase() == "span"){
            console.log("点击了span");
        }else if(target.tagName.toLowerCase() == "li"){
            console.log("点击了li");
            var index = Array.from(liList).indexOf(target);   //相对于同级li的下标
            // var index1 = Array.from(list.children).indexOf(target)  //相对于同级所有元素的下标
            // console.log(target,index,index1);

            // 区分是哪一个li
            if(target.id == "first"){
                console.log("第一个",index);
            }else if(target.getAttribute("name")=="second"){
                console.log("第二个",index);
            }else if(target.className == "mid"){
                console.log("第三个",index);
            }else if(target.classList.contains("last")){
                console.log("第六个",index);
            }else if(target.className == "newLi"){
                console.log("新增的",index);
            }else{
                console.log("剩余的lis",index);
            }

        }
    }
  



</script>
</html>